import React from 'react';
import { Menu, Dropdown } from 'antd';
import Icon from '@/components/IconPro';

import LinkTo from '@/components/LinkTo';
import styles from './TabBarExtraContent.less';

export const MoreMenuBtn = ({ onAdd, onDelete }) => {
    const menu = (
        <Menu className={styles.dropMenu}>
            <Menu.Item onClick={onAdd}>添加模块</Menu.Item>
            {onDelete && <Menu.Item onClick={onDelete}>删除</Menu.Item>}
        </Menu>
    );
    return (
        <Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
            <div className={styles.moreMenu}>
                <Icon type="more" />
            </div>
        </Dropdown>
    );
};

/**
 * 右上角的更多
 * @param {*} props
 */
const MoreBar = props => (
    <div className={styles.btnTool}>
        {!props.hideMoreBtn && (
            <LinkTo {...props.linkProps} className={styles.btn}>
                <Icon type="iconlistfunction_more_icon_default" />
            </LinkTo>
        )}
    </div>
);

/**
 * 右上角的设置
 * @param {*} props
 * */
const SettingBar = ({ onClick, ...props }) => (
    <div className={styles.btnTool}>
        <span
            onClick={() => {
                props.setVisible(true);
                if (onClick) onClick();
            }}
            className={styles.btn}
        >
            <Icon type="iconEditEntrance" style={{ fontSize: 24 }} />
        </span>
    </div>
);

export { SettingBar, MoreBar };
